<!--代码逻辑和样式库-->
<script src="./map-setting.component.js"></script>
<style src="./map-setting.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 内容区域 -->
    <div class="content-container aq-margin-top-16">
      <!--用户列表table-->
      <el-table v-loading="loading" :data="data" border fit highlight-current-row>
        <el-table-column prop="colour" label="颜色" />
        <el-table-column label="阈值范围" align="center">
          <template slot-scope="scope">
            {{ scope.row.startValue }} - {{ scope.row.endValue }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-link v-if="codesCheck.indexOf('Edit') != -1" icon="el-icon-edit" type="primary" @click="openEditDialog(scope.row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 创建/编辑信息弹窗开始 -->
    <el-dialog title="阈值范围编辑" :visible.sync="editDialogVisible" width="700px">
      <el-form ref="dataForm" :model="editForm" label-position="left" label-width="130px">
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="颜色:">
              {{ editForm.colour }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="阈值范围(小时):" required>
              <div class="aq-vertical-middle">
                <el-input v-model="editForm.startValue" class="width-200 aq-margin-right-8" clearable />
                <span>ㅡ</span>
                <el-input v-model="editForm.endValue" class="width-200 aq-margin-left-8" clearable />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="aq-margin-top-12">
          <el-col :xs="24" :sm="24" :lg="24" align="center">
            <el-button type="primary" class="action-btn" @click="save()">确定</el-button>
            <el-button class="action-btn" @click="editDialogVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
